<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./swiper-bundle.min.css">
  <style>
    .swiper-container {
      /* margin: 0;
      padding: 0;
      width: 100%;
      height: 100%; */
      width: 600px;
      height: 300px;
      border: 10px solid pink;
      margin: 40px auto;
    }
  </style>
</head>
<body>

  <div class="swiper-container" id="swiper1">
    <div class="swiper-wrapper">
      <div style="background-color: skyblue;" class="swiper-slide">Slide 1</div>
      <div style="background-color: orange;" class="swiper-slide">Slide 2</div>
      <div style="background-color: yellow;" class="swiper-slide">Slide 3</div>
      <div style="background-color: green;" class="swiper-slide">Slide 4</div>
      <div style="background-color: red;" class="swiper-slide">Slide 5</div>
    </div>

    <!-- 如果需要分页器 -->
    <div class="swiper-pagination" ></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
  </div>

  <div class="swiper-container" id="swiper2">
    <div class="swiper-wrapper">
      <div style="background-color: skyblue;" class="swiper-slide">Slide 1</div>
      <div style="background-color: orange;" class="swiper-slide">Slide 2</div>
      <div style="background-color: yellow;" class="swiper-slide">Slide 3</div>
      <div style="background-color: green;" class="swiper-slide">Slide 4</div>
      <div style="background-color: red;" class="swiper-slide">Slide 5</div>
    </div>

    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
  </div>



  <script src="./swiper-bundle.min.js"></script>
  <script>
    new Swiper('#swiper2')

    var mySwiper = new Swiper('#swiper1', {
      // 人家对于 轮播图 的配置选项
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项
      initialSlide :2, // 初始化的时候显示 [2] 哪一个图片
      speed: 300, // 一张图片的切换速度
      grabCursor : true, // 光标样式
      autoplay: {
        delay: 3000
      },

      // effect: 'fade', // 渐隐渐现
      // effect: 'cube', // 魔方
      effect : 'flip',
      // effect : 'coverflow',
      // slidesPerView: 3,
      // centeredSlides: true,


      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // 如果需要滚动条
      // scrollbar: {
        // el: '.swiper-scrollbar',
      // },
    })
  </script>
  <script>
    /*
      Swiper
        + 页面上的 滑动类 插件
        + 专门实现 滑动类 效果的插件

      名词: 第三方
        + 插件: 专门为了实现某一类单一功能而出现的 js 代码
        + 类库: 把所有原材料和各种加工方法进行封装, 你自己组合
        + 框架: 有独立的自己的生态系统的一套内容

      插件的使用
        1. 找到官网(按照人家说明文档)
          => https://www.swiper.com.cn
        2. 下载文件
        3. 引入文件
        4. 复制粘贴
    */
  </script>
</body>
</html>
